<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.extend(options)</title>
    <script src="vue.js"></script>
    <style>
        div{
            width: 200px;
            height: 100px;
            background-color: #eee;
            padding: 50px;
            border-radius: 10px;
            border: 1px solid #ddd;
            color: #000;
        }
        #alert{
            position: absolute;
            text-align: center;
            animation: alertComp 1s ease both;
        }
        @keyframes alertComp {
            from{
                top: 100px;
                left: 50px;
            }
            to{
                top: 200px;
                left: 50%;
                transform: translateX(-50%);
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="text" v-model='msg'>
        <button @click='defin_alert'>点击</button>
    </div>
    <template id='alertComponent'>
        <div id="alert">
            我是动态组件:<br/>
            <span style="color:burlywood;font-size: 36px;">{{myData}}</span>
        </div>
    </template>
</body>
<script>
    const vm = new Vue({
        el:'#app',
       data() {
           return {
               msg:'ok'
           }
       },
        methods: {
            defin_alert(){
                let info = document.getElementById('alert')
                console.log(info)
                if(info !== null && info !== undefined){
                    document.body.removeChild(info)
                }
                let testComponent = Vue.extend({
                    props:['myData'],
                    template:'#alertComponent'
                })
                
                const extendComponent = new testComponent({
                    propsData:{
                        myData:vm.msg
                    }
                }).$mount()
                document.body.appendChild(extendComponent.$el)
            }
        },
    })
</script>
</html>